import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

class ListViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView"),
      ),
//      body: new SeparatedListView(),
//      body: new ListViewbuilder(),
       body: new InfiniteListView(),
    );
  }
}

/**
 * ListView.separated可以在生成的列表项之间添加一个分割组件，它比ListView.builder多了一个separatorBuilder参数，该参数是一个分割组件生成器。
 */
class SeparatedListView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _SeparatedListView();
  }
}

class _SeparatedListView extends State<SeparatedListView> {
  @override
  Widget build(BuildContext context) {
    //创建widget分割线
    Widget divider1 = Divider(color: Colors.deepPurpleAccent);
    Widget divider2 = Divider(color: Colors.red);
    return ListView.separated(
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(title: Text("$index"));
        },
        separatorBuilder: (BuildContext context, int index) {
          return index % 2 == 0 ? divider1 : divider2;
        });
  }
}

/**
 * ListView.builder适合列表项比较多（或者无限）的情况，因为只有当子组件真正显示的时候才会被创建，也就说通过该构造函数创建的ListView是支持基于Sliver的懒加载模型的。
 */
class ListViewbuilder extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _ListViewbuilder();
  }
}

class _ListViewbuilder extends State<ListViewbuilder> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        itemCount: 100,
        itemExtent: 50.0, //强制高度为50.0
        itemBuilder: (BuildContext context, int index) {
          return ListTile(title: Text("$index"));
        });
  }
}

class InfiniteListView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _InfiniteListView();
  }
}

/**
 *假设我们要从数据源异步分批拉取一些数据，然后用ListView展示，当我们滑动到列表末尾时，判断是否需要再去拉取数据，
 * 如果是，则去拉取，拉取过程中在表尾显示一个loading，拉取成功后将数据插入列表；如果不需要再去拉取，则在表尾提示"没有更多"
 */
class _InfiniteListView extends State<InfiniteListView> {
  //final属于单赋值，使用final修饰的变量必须进行初始化，一旦被赋值以后，不能被再次赋值。
  //
  //const修饰的变量它会在编译器以至于应用整个生命周期内都是不可变的常量，在内存中也只会创建一次，
  // 之后的每次调用都会复用第一次创建的对象。

  static const loadingTag = "##loading##";
  var _words = <String>[loadingTag];

  /**
   * 1. 初始化
    构造函数(constructor)
    initState : 只会调用一次
    didChangeDependencies : Called when a dependency of this [State] object changes.(会执行多次)
    Widget build
   */
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _retrieveData();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.separated(
        itemBuilder: (BuildContext context, int index) {
          //如果到了尾部
          if (_words[index] == loadingTag) {
            //不足100条，继续获取数据
            if (_words.length - 1 < 100) {
              //获取数据
              _retrieveData();
              //加载时显示loading
              return Container(
                padding: const EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(strokeWidth: 2.0),
                ),
              );
            }else {
              //已经加载了100条数据，不再获取数据
              return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16.0),
                child: Text(
                  "没有更多数据了",
                  style: TextStyle(color: Colors.deepPurpleAccent),
                ),
              );
            }
          }
          //显示单词列表项
          return ListTile(title: Text(_words[index]));
        },
        separatorBuilder: (BuildContext context, int index) {
          return Divider(height: .0);
        },
        itemCount: _words.length);
  }

  /**
   * generateWordPairs 每次生成20个单词
   */
  void _retrieveData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      setState(() {
        //重新构建列表
        _words.insertAll(_words.length - 1,
            generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      });
    });
  }
}

class HeadListView extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _HeadListView();
  }
}

class _HeadListView extends State<HeadListView> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(children: <Widget>[
      ListTile(title: Text("商品列表")),
      ListView.builder(
        itemCount: 100,
        itemExtent: 50.0, //强制高度为50.0
        itemBuilder: (BuildContext context, int index) {
          return ListTile(title: Text("$index"));
        })


    ],);
  }
}